<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { Layout } from 'ant-design-vue'
import type { MenuProps } from 'ant-design-vue'
import { adminMenus, teacherMenus, studentMenus } from '@/config/menu'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import Logo from '@/components/common/Logo.vue'
import UserAvatar from '@/components/common/UserAvatar.vue'

const { Sider, Header, Content } = Layout
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 侧边栏折叠状态
const collapsed = ref(false)
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}

// 当前选中的菜单项
const selectedKeys = computed(() => [route.path])

// 根据用户类型获取菜单
const menuItems = computed<MenuProps['items']>(() => {
  const userType = userStore.userInfo?.userType
  
  switch (userType) {
    case 1: return adminMenus
    case 2: return teacherMenus
    case 3: return studentMenus
    default: return []
  }
})

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  router.push(key)
}

// 初始化用户信息
onMounted(() => {
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    userStore.userInfo = JSON.parse(storedUserInfo)
  }
})
</script>

<template>
  <div class="main-layout">
    <Sider
      v-model:collapsed="collapsed"
      class="sider"
      :trigger="null"
      collapsible
      :width="220"
      :collapsedWidth="64"
    >
      <Logo :collapsed="collapsed" />
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        :inline-collapsed="collapsed"
        :items="menuItems"
        @click="handleMenuClick"
      />
    </Sider>

    <Layout :style="{ marginLeft: collapsed ? '64px' : '220px' }">
      <Header class="header">
        <div class="header-left">
          <component
            :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
            class="trigger"
            @click="toggleCollapsed"
          />
        </div>
        <div class="header-right">
          <UserAvatar />
        </div>
      </Header>

      <Content class="content">
        <router-view />
      </Content>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.main-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;

  .sider {
    position: fixed;
    height: 100vh;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    background: #001529;
    
    :deep(.ant-layout-sider-children) {
      display: flex;
      flex-direction: column;
      height: 100%;

      .ant-menu {
        flex: 1;
        border-right: none;

        .ant-menu-item {
          height: 50px;
          line-height: 50px;
          margin: 4px 0;
          
          .anticon {
            font-size: 16px;
          }
        }

        // 折叠状态样式
        &.ant-menu-inline-collapsed {
          width: 64px;
          
          .ant-menu-item {
            padding: 0 !important;
            width: 64px;
            text-align: center;

            .anticon {
              line-height: 50px;
              font-size: 18px;
              margin-right: 0;
            }
          }

          .ant-menu-title-content {
            display: none;
          }

          .ant-menu-submenu {
            .ant-menu-submenu-title {
              padding: 0 !important;
              text-align: center;

              .anticon {
                line-height: 50px;
                font-size: 18px;
              }
            }
          }
        }
      }
    }

    // 优化折叠触发器
    :deep(.ant-layout-sider-trigger) {
      height: 48px;
      line-height: 48px;
      background: #002140;

      &:hover {
        background: #002950;
      }
    }
  }

  .ant-layout {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    background: #f0f2f5;
    transition: margin-left 0.2s;

    .header {
      height: 64px;
      padding: 0;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        .trigger {
          width: 64px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            color: #1890ff;
          }
        }
      }

      .header-right {
        display: flex;
        align-items: center;
        padding-right: 16px;
      }
    }

    .content {
      margin: 24px;
      padding: 24px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow-y: auto;
      min-height: calc(100vh - 112px);
    }
  }
}

// 响应式处理
@media screen and (max-width: 768px) {
  .main-layout {
    .sider {
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      z-index: 1001;
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);

      &.ant-layout-sider-collapsed {
        transform: translateX(0);
      }
    }

    .ant-layout {
      margin-left: 0 !important;
    }
  }
}
</style> 